<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
    <title>xx数据统计</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="bpp">
      <h1 style="text-align: center">xx数据统计</h1>
      <header>
        <h5>数据统计时间:</h5>
        <h6>{{UT}}</h6>

        <div class="totalDataPanel">
          <li>共计确诊：{{TCF}}<br /></li>
          <li>共计治愈：{{TC}}<br /></li>
          <li>共计已故：{{TD}}<br /></li>
        </div>
        <h5 class="DSText">
          数据来源：
          <h6 class="DSText UT">{{DS}}</h6>
        </h5>
      </header>
      <div class="inputPanel">
        <b>省份：</b>
        <select v-model="selectedProvince">
          <option v-for="(value) in provinces" :value="value.index" key="value.index">{{value.provinceName}}</option>
        </select>
      </div>
      <div class="inputPanel">
        <button @click="lastPage" class="lastBT">上页</button>
        当前{{now+1}}页，共{{maxPage}}页
        <button @click="nextPage" class="nextBT">下页</button>
      </div>

      <ul v-if="length!=-1">
        <h3 class="provinceName">{{PD[selectedProvince].childStatistic}}</h3>
        <li v-for="index in 10" :key="index">
          <div v-if="(now * 10 + index-1) < length" class="dataPanel">
            病例来源：
            <span> {{getArea(index)}} </span><br />
            累计确诊：
            <span> {{getTCF(index)}} </span><br />
            累计已故：
            <span>{{getTD(index)}}</span><br />
            累计治愈：
            <span>{{getTC(index)}}</span><br />
          </div>
        </li>
      </ul>
    </div>
    <script src="./getData.js"></script>
  </body>
</html>
